﻿@using System.Drawing
@using Eksponent.CropUp
@using Eksponent.CropUp.Client
<!DOCTYPE html>
<html>
<head>
    <title>Eksponent CropUp demo</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/CropUp.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/jquery.Jcrop.css")" rel="stylesheet" type="text/css" />    
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/CropUp.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/CropUp.Editor.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.Jcrop.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.color.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
       
</head>

    <body>
      @*          <button id="test">Zoom!</button>
      *@  
        <div>@RenderBody()</div>
        
        @CropUpHtml.CropUpResponsive("/Content/big1.jpg", upscaleStep: 400, id: "backdrop",
                 cropInfo: new CropInfo { Gravity = new PointF(.40625f, .37291f) })

        <script type="text/javascript">
            $(function () {
                $("#backdrop").css({ opacity: .2 });
            })
        </script>
    </body>
</html>
